<template>
    <a-layout id="components-layout-demo-side" style="min-height: 100vh">
        <a-layout-sider v-model="collapsed"
                        :trigger="null"
                        collapsible
                        theme="light">
            <div class="logo">{{collapsed?'BONE':'BONE后台管理'}}</div>
            <a-menu theme="light" :default-selected-keys="['1']" mode="inline">
                <a-menu-item key="1">
                    <a-icon type="desktop"/>
                    <span>首页</span>
                </a-menu-item>
                <a-sub-menu key="sub1">
                    <span slot="title"><a-icon type="user"/><span>用户管理</span></span>
                    <a-menu-item key="2">
                        用户管理
                    </a-menu-item>
                    <a-menu-item key="3">
                        角色管理
                    </a-menu-item>
                    <a-menu-item key="4">
                        菜单管理
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #3c8eff; padding: 0">
                <a-icon
                        class="trigger"
                        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                        @click="() => (collapsed = !collapsed)"
                        style="font-size: 20px;color: white;"/>

                <a @click="showConfirm">
                    <span style="float: right;font-size: 16px;color: white;margin-right: 20px;">
                <a-icon type="logout"/>
                退出登录</span></a>
            </a-layout-header>
            <a-layout-content style="margin: 0 16px">
                <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>User</a-breadcrumb-item>
                    <a-breadcrumb-item>Bill</a-breadcrumb-item>
                </a-breadcrumb>
                <div :style="{ padding: '24px', background: '#fff', minHeight: '100%' }">
                    Bill is a cat.
                </div>
            </a-layout-content>
            <a-layout-footer style="text-align: center;">
                <!-- <a-button @click="()=>{$router.push({path: '/login'})}">
                     {{$store.getters.getInfo}}
                 </a-button>-->
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>

<script>
    import {constantRouterMap} from '../../router/index'

    export default {
        name: "Index",
        data() {
            return {
                user: {},
                collapsed: false,
            }
        },
        created() {
            this.check();
        },
        methods: {
            showConfirm() {
                let that = this;
                this.$confirm({
                    title: '提示',
                    content: '您确定要退出登录吗?',
                    okText: '确认',
                    cancelText: '取消',
                    onOk() {
                        that.$store.dispatch("LOGOUT").then(() => {
                            that.check();
                            that.$notification.success({message: "退出成功", description: "提示", duration: 4});
                        });
                    },
                    onCancel() {
                        that.$message.info("已确认取消");
                    },
                });
            },
            check() {
                let token = this.$store.getters.token;
                console.log(token);
                if (token == null || token === '' || undefined === typeof token) {
                    this.$router.push({path: "/login"}).catch(() => {
                        this.$notification.error({message: '系统提示', description: '登录页丢失!', duration: 2});
                    });
                } else {
                    this.$store.dispatch("LOGIN_INFO").then(res => {
                        if (res.code !== 200) {
                            this.$notification.error({message: '系统提示', description: '登录已失效!', duration: 2});
                            this.$router.push({path: '/login'});
                        }
                    }).catch(() => {
                        this.$notification.error({message: '系统提示', description: '登录已失效!', duration: 2});
                        this.$router.push({path: '/login'});
                    });
                }
            }
        }
    }
</script>

<style scoped>
    #components-layout-demo-side .logo {
        height: 64px;
        background: #3c8eff;
        padding-top: 20px;
        padding-left: 15px;
        font-size: 20px;
        color: white;
        font-weight: bolder;
    }
</style>